<template>
  <div class="invite-container" v-loading="loading">
    <NotDataErrorException v-if="exceptionInfo.subTitle" v-bind="exceptionInfo" />
    <Row v-else :gutter="[24, 24]">
      <Col :span="9">
        <div class="invite-left">
          <div class="invite-left-header">
            <img :src="tenantConfig?.logo || defaultLogo" />
            <div class="ml-2 truncate font-medium md:opacity-100">
              {{ tenantConfig?.name }}
            </div>
          </div>
          <div class="invite-left-desc flex xl:flex xl:flex-col">
            <div class="mt-2 font-normal text-md dark:text-gray-600" style="white-space: pre-wrap" v-html="tenantConfig?.siteDescTitle"></div>
          </div>
        </div>
      </Col>
      <Col :span="15">
        <div class="invite-right">
          <div class="invite-right-title"> 欢迎加入「{{ inviteInfo.tenantName }}」 </div>
          <div class="teamix-title"> 来自用户 {{ inviteInfo.invitorName }} 的邀请 </div>

          <a-form layout="vertical" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="姓名">
              <a-input v-model:value="modelRef.name" disabled />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button type="primary" style="width: 100%" v-if="inviteInfo.isJoin" @click="handleSubmit">进入企业</a-button>
              <a-button type="primary" style="width: 100%" v-else @click="handleSubmit">加入企业</a-button>
            </a-form-item>
          </a-form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" name="invite-user" setup>
  import { ref, onMounted, reactive } from "vue"
  import defaultLogo from "/@/assets/images/default-app.png"
  import * as appCache from "/@/utils/cache/module"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Row, Col } from "ant-design-vue"
  import { useUserStore } from "/@/store/modules/user"
  import { selectLoginTenant } from "/@/api/sys/user"
  import * as userApi from "/@/api/iam/user"
  import { useRoute } from "vue-router"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { usePermissionStoreWithOut } from "/@/store/modules/permission"
  import NotDataErrorException from "/@/views/sys/exception/NotDataErrorException.vue"

  const permissionStore = usePermissionStoreWithOut()
  const { t } = useI18n()
  const route = useRoute()
  const exceptionInfo = ref<any>({
    title: "邀请链接异常",
    subTitle: undefined,
    full: true,
    showBtn: false,
  })
  const tenantConfig = ref<any>()
  const { createMessage, createConfirm } = useMessage()
  const userStore = useUserStore()
  const labelCol = { span: 4 }
  const wrapperCol = { span: 24 }
  const inviteInfo = ref<any>({})
  const loading = ref(true)
  const modelRef = reactive({
    name: "",
  })
  onMounted(async () => {
    loading.value = true
    modelRef.name = userStore.getUserInfo.userName
    tenantConfig.value = appCache.getPublicConfig()
    userApi.getUserInviteBySign({ sign: route.query.sign })
      .then((resp) => {
        if (!resp.success) {
          exceptionInfo.value.subTitle = resp.message
          return
        }
        inviteInfo.value = resp.data
      })
      .catch((resp) => {
        exceptionInfo.value.subTitle = resp.message
      }).finally(() => {
        loading.value = false
      })
    console.log("platformConfig: ", tenantConfig.value)
  })

  /**
   * 确认选中的租户信息
   */
  const handleSubmit = async () => {
    try {
      //
      createMessage.loading({
        content: t("sys.app.menuLoading"),
        key: "menu_loading",
      })
      if (!inviteInfo.value.isJoin) {
        // 调用加入接口
        const resp = await userApi.userJoinTenant({ sign: inviteInfo.value.sign })
        if (!resp.success) {
          exceptionInfo.value.subTitle = resp.message
          return
        }
      }
      const tenantId = inviteInfo.value.tenantId
      // 调用选中登录的接口
      await selectLoginTenant({
        tenantId,
        appId: inviteInfo.value.appId,
        loginId: userStore.getTokenInfo.loginId,
      })
      await userStore.switchTenant(tenantId as string, true)
      permissionStore.setDynamicAddedRoute(false)
      userStore.afterLoginAction(true, { tenantId })
    } catch (e) {
      console.error("error", e)
    } finally {
      createMessage.destroy("menu_loading")
    }
  }
</script>

<style lang="less">
  .invite-container {
    width: 100vw;
    min-width: 1200px;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
  }
  .invite-left {
    min-width: 500px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh);
    padding: 200px 106px;
    background-image: url(/@/assets/images/invite-left.png);
    &-header {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;

      font-size: 25px;
      // font-weight: bold;
      font-family:
        Arial,
        Microsoft YaHei,
        sans-serif;
      transition: all 0.5s;
      img {
        width: 54px;
        height: 54px;
      }
    }

    &-desc {
      margin-top: 18px;
      margin-bottom: 184px;
      font-size: 20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      display: grid;
      color: @text-color-base;
    }
  }

  .invite-right {
    width: 528px;
    margin-top: 188px;
    margin-left: auto;
    margin-right: auto;
    &-title {
      color: var(--text-title, #292929);
      font-size: 24px;
      font-weight: 500;
    }

    .teamix-title {
      color: @text-desc-color;
      font-size: 14px;
      margin-top: 8px;
      margin-bottom: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .ant-form-item-label label {
    color: @text-desc-color !important;
  }
</style>
